<template>
 <div>
   <el-form inline>
     <el-form-item label="目录">
       <el-cascader
         :options="data"
         v-model="selDir"
         @change="dirChangeHandle"
         :props="props"
         change-on-select>
       </el-cascader>
     </el-form-item>
   </el-form>
   <div>
     <PicPicker class="ele"
                @uploaded="uploadVideo" :themeId="themeId" fileType="video"></PicPicker>
     <div class="ele"  v-for="element in videoList">
       <video width="100%" height="100%" :src="http + element.filePath"
              @click="selectedVideo(element)"
              loop>
         <source :src="http + element.filePath"  type="video/ogg">
         <source :src="http + element.filePath"  type="video/mp4">
       </video>
       <div style="position: relative;top:-125px;color: #8a979e;font-size: 12px">{{element.name}}</div>
     </div>
   </div>
   <div class="clear"></div>
   <div style="position: absolute;bottom:1%;">
     <el-pagination
       small
       @size-change="currentChangeHandle"
       @current-change="currentChangeHandle"
       :current-page="query.page"
       :page-sizes="[20, 50, 100]"
       :page-size="query.limit"
       :total="videoTotal"
       layout="total, prev, next, pager">
     </el-pagination>
   </div>
 </div>
</template>

<script>
import appConst from '../util/appConst'
import PicPicker from './PicturePicker'
export default {
  props: {
    selectedVideo: {
      type: Function
    },
    themeId: {
      type: String
    }
  },
  data () {
    return {
      http: appConst.BACKEND_DOMAIN,
      query: {
        limit: 5,
        cid: 1,
        page: 1,
        type: 1
      },
      data: [{}],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      selDir: []
    }
  },
  computed: {
    videoList () {
      return this.$store.state.editor.videoList
    },
    videoTotal () {
      return this.$store.state.editor.videoTotal
    }
  },
  mounted () {
    this.getGroups()
  },
  methods: {
    uploadVideo (data) {
      data.cid = this.query.cid
      this.$store.dispatch('saveVideo', data)
      // this.$store.dispatch('saveVideo', {
      //   'filePath': data['filePath'],
      //   'themeId': this.themeId
      // })
    },
    currentChangeHandle (value) {
      this.query.page = value
      console.log('query', this.query)
      this.$store.dispatch('getVideoListByThemeId', this.query)
    },
    dirChangeHandle () {
      this.query.page = 1
      this.query.cid = this.selDir[this.selDir.length - 1]
      console.log('query', this.query)
      this.$store.dispatch('getVideoListByThemeId', this.query)
    },
    getGroups () {
      const self = this
      const url = '/sys/materialclass/l?id=1'
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          self.data = [{id: 1, name: '视频', children: data.data}]
          self.selDir = [1]
        } else {
          // alert(data.msg)
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    }
  },
  components: {
    PicPicker
  }
}
</script>

<style lang="less" scoped>
.ele {
  float: left;
  width: 125px;
  height: 125px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px 5px;
  &:hover {
    border: 2px solid #18ccc0;
    cursor: pointer;
  }
}
</style>
